<template>
	<view>
		<!-- 快捷功能区 -->
		<view class="bar">
			<navigator class="action" url="/pages/music/playlist?id=215">
				<text class="iconfont icon-fozhu"></text>
				<text class="txt">经典颂念</text>
			</navigator>
			<navigator class="action" url="/pages/music/playlist?id=220">
				<text class="iconfont icon-foshou"></text>
				<text class="txt">密咒真言</text>
			</navigator>
			<navigator class="action" url="/pages/music/playlist?id=200">
				<text class="iconfont icon-bangdan"></text>
				<text class="txt">榜单</text>
			</navigator>
			<navigator class="action" url="/pages/music/playlist?id=230">
				<text class="iconfont icon-guqin"></text>
				<text class="txt">清音</text>
			</navigator>
		</view>

		<!-- 最新收录 -->
		<view class="pannel">
			<view class="left">最新收录</view>
		</view>
		<!-- 歌单 -->
		<view class="playlist">
			<navigator class="item" v-for="(item,index) in playlisList.new" :key="index"
				:url="'/pages/music/details?id='+item.id">
				<image class="cover" :src="item.iconUrl"></image>
				<view class="mask"></view>
				<text class="name">{{item.name}}</text>
			</navigator>
		</view>

		<!-- 最新收录 -->
		<view class="pannel">
			<view class="left">最热收听</view>
		</view>
		<!-- 歌单 -->
		<view class="playlist">
			<navigator class="item" v-for="(item,index) in playlisList.hot" :key="index"
				:url="'/pages/music/details?id='+item.id">
				<image class="cover" :src="item.iconUrl"></image>
				<view class="mask"></view>
				<text class="name">{{item.name}}</text>
				<view class="hot">
					<text class="iconfont icon-shouting"></text>{{item.hot}}
				</view>
			</navigator>
		</view>

		<!-- 页脚 - 回向 -->
		<view class="towards top50">
			<view><text class="iconfont icon-huawen-shang"></text></view>
			<view class="towards-txt">
				<text>所有音频，皆自网络。\n如有侵权，联系删除。\n 法音普度，无量功德。</text>
			</view>
			<view><text class="iconfont icon-huawen-xia"></text></view>
		</view>
	</view>
</template>

<script>
	import apiMusic from '@/common/api/music.js'
	export default {
		data() {
			return {
				playlisList: {
					"hot": [],
					"new": [],
				}
			};
		},
		created() {
			this.loadPlaylist("new")
			this.loadPlaylist("hot")
		},
		methods: {
			loadPlaylist(type) {
				let _this = this
				apiMusic.playlist({
					page: 1,
					size: 6,
					order: type
				}).then(res => {
					_this.playlisList[type] = res.list;
				}).catch(err => {
					console.error(err)
				})
			},
		}
	}
</script>

<style lang="scss">
	.bar {
		display: flex;
		justify-content: space-around;
		margin: 30rpx 16rpx;

		.action {
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #493129;

			.iconfont {
				font-size: 68rpx;
				color: #E69B49;
			}

			.txt {
				font-size: 28rpx;
				margin-top: 9rpx;
			}
		}
	}

	.pannel {
		margin: 30rpx 36rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			font-size: 38rpx;
			font-weight: bold;
		}

		.right {
			display: flex;
			align-items: center;

			.action {
				font-size: 26rpx;
				color: #343434;

				&.on {
					color: #E69B49;
					font-weight: bold;
				}
			}

			.line {
				width: 5rpx;
				height: 28rpx;
				margin: 0 8rpx;
				border-radius: 5rpx;
				background: #F0AD4E;
			}
		}
	}

	.audio {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 10rpx;
		margin: 0 36rpx;

		.item {

			.name {
				font-size: 33rpx;
			}

			.singer {
				font-size: 28rpx;
				color: rgba(0, 0, 0, .4);
			}
		}
	}

	.audio-hot {
		margin: 0 36rpx;

		.item {
			display: flex;
			margin: 10rpx 0;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				.index {
					font-size: 38rpx;
					font-weight: bold;
					font-style: italic;
					margin: 0 36rpx 0 0;
				}


				.name {
					font-size: 33rpx;
				}

				.singer {
					font-size: 28rpx;
					color: rgba(0, 0, 0, .4);
				}
			}

			.right {
				display: flex;
				flex-direction: column;
				justify-content: center;

				.duration {
					font-size: 33rpx;
				}

				.hot {
					color: #333333;
					opacity: 0.8;
				}
			}

		}
	}

	.playlist {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		justify-items: center;
		grid-gap: 10rpx;
		margin: 0 36rpx;

		.item {
			width: 30vw;
			height: 30vw;
			background-color: rgba(0, 0, 0, .1);
			border-radius: 8rpx;
			position: relative;

			.cover {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}

			.mask {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(101, 101, 101, 0.3);
			}

			.name {
				position: absolute;
				bottom: 8rpx;
				left: 8rpx;
				color: #FFFFFF;
				font-weight: bold;
				font-size: 25rpx;
			}

			.hot {
				position: absolute;
				top: 8rpx;
				right: 8rpx;
				color: #F1F1F1;
				font-size: 25rpx;
			}

		}
	}

	.top50 {
		margin-top: 80rpx;
	}
</style>
